<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .div {
            margin-top: 40px;
            width: 200px;
            height: 100px;
            border: 5px solid black;
        }
        .sad {
            border: 5px solid gray;
            background-color: green;
        }
        .happy {
            border: 5px solid pink;
            background-color: skyblue;
        }

        .first {
            background-color: orange;
        }
        .second {
            border-radius: 20%;
        }
        .third {
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- 字符串写法 适用于样式名不确定，但需要动态指定 -->
        <div class="div" :class="method">黑马</div>
        <button @click="toggle">随机切换心情</button>

        <!-- 数组写法 适用于样式名不确定，样式个数不确定 -->
        <div class="div" :class="classArr">黑马</div>

        <!-- 对象写法 适用于样式名确定，样式个数确定，但不确定是否要应用 -->
        <div class="div" :class="classObj">黑马</div>
    </div>
    <script>
        Vue.config.productionTip = false;

        let vm = new Vue({
            el: '#root',
            data: {
                method:'',
                classArr:["first", "second", "third"],
                classObj:{
                    first:true,
                    second:false,
                    third:true,
                },
            },
            methods: {
                toggle (){
                    const arr = ["sad", "happy"];
                    // floor向下取整, random()的值为 [0, 1)
                    // index的值只能为0或1
                    const index = Math.floor(Math.random()*2);
                    this.method = arr[index];
                }
            },
        });
    </script>
</body>
</html>